History
I started working on the site in December 20l0 during the exam break. I wanted to learn HTML/CSS and making a website seemed a good way to begin. I looked at some tutorials and the source code for several websites and put something simple together. Initially the site consisted of just the index page with dummy links and posts being directly entered into the page. Over the next few weeks I worked to add other features such as the comic, writings and picture sections. The next big update came in March 2011 with the addition of comments. This required the creation of separate individual pages to put the comments for each post on to keep the main page from becoming cluttered. The next update came in April of that year with the addition of an archive page. Initially it consisted of just links to past copies of the index page but that was changed to be a series of links to individual posts.
The site was working fairly well at this point but two big problems were slowly becoming apparent. Firstly it was becoming a hassle to add new content. Every new page was created by copying an old page and updated any links, content and references. This became especially annoying with the pictures since adding new content required updated the index and all the next /previous buttons. The second problem was that it was becoming very hard to change anything in the base layout. Because every single page was its own file to change anything in the layout required changing every single file. The solution to these problems was to make the site more dynamic using php. I’d worked with php a little bit to do the comments but I wanted to learn more about it and this seemed the perfect time to do so. Over the next little while I worked to write scripts for every group of pages so that everything was created mostly on the fly based on the information provided. This update made it a lot easier to add new content by automating the creation of links and to change the layout by having all that information in one file.
The most recent update to the site came in august of this year with the drive for valid HTML5. I had been reading about web standards and the time and figured it was a good idea to make sure I was doing things right. There weren’t a lot of changes needed to make the site validate, it was mostly ensuring the proper separation of content and style and reworking some parts of the site that I could know see were problematic. There were very few visual changes but some of the code became simpler to use and maintain.
Design Philosophy
My current philosophy when it comes to this site is based on a file structure based on functionality. This means every file should contain only (and all) the information required to perform its function, and as much as possible specific functionality should be limited to a single file. The main idea is to cut down on duplicate code and make files easier to read. Ensuring that files don’t have any superfluous information makes it easier to create new pages. Having specific functionality in only one file makes things easier to change. I started following this philosophy when I made the move to make the site more dynamic and automated to maximize readability and maintainability.
template.html
This file contains the basic layout of the site. The first part of the file is the head tag which contains a lot of information about the site. It has a default title (That will be replaced by most scripts), some information about the type of content and the encoding, as well as links to the icon, CSS, and RSS feed files to be used by the user’s browser. The next part is the body which contains all the content of the page divided into several sections. The first section is the logo which contains the logo image of the site set up as a link to the homepage. The second section is the main section which contains the left hand navigation sidebar and the empty right hand section (Which will be filled by the scripts creating the pages). The final section is the footer which contains links to the CSS, RSS, and HTML validation pages as well as the copyright notice.
style.css
This is the style sheet for the website. It contains all the CSS ids and classes used throught the various pages.
/Page files
page.php
Page.php is the simplest script on the site and simply displays the contents of a named file in the right section of the layout. Page.php starts out by initializing the line variables “$rightText” and “$title” along with the parameter variable “$name”. The script then opens the template file and loops through it printing every line until it finds a line containing the value of “$title”, this will be the title tag in the head of the html file. The script then replaces the line with a title tag combining the name of the site and the name given by the value of “$name”. The script then continues looping until it finds a line containing the value of “$rightText”, this is the main section of the page. It then opens the file named “$name” in the “pages” directory of the site. The script then loops through the page file printing every line into the right section until it reaches the end of the file. The script then finishes printing the template file and exits. This is used for pages that don't require any dynamic linking or file grabbing that would require specialized processing.
page_example.html
These files reside in the “pages” directory and are displayed by page.php. They are basic HTML files but without any of the surrounding html, head, or body tags. To access one of these files one uses the page.php script with the name parameter set to the name of the file. The entire content of the file is then displayed in the right section of the website.
/Error page files
badrequest.html
forbid.html
notFound.html
internalerror.html
These files are the pages users can get redirected to if they get an error messages. Unlike the rest of the pages on this site these care complately HTML and not produced by a script. The reason for this is that if the server is in an error state I don't want to push it and cause more problems, I just want to very quickly display an error message. This means that if the template file gets updated the error files also have to be updated manually but luckily there's only 4 files with 3 lines each to add back in to the template. Note that some of these error pages may not be displayed properly since the switch to a windows server. On Linux, the server seemed quite happy to listen to the .htaccess file but on windows things aren’t that simple. The problem is that I don’t have direct access to the IIS configuration and by default some parts of the web.config needed to define custom errors are locked and any attempt to modify them lead to server errors.
Script files
These are php files that contain functions useful to other pages.
display.php
This file is used to control the printing of often repeated content. The displayPicture function displays a picture in a frame on the page and adds a link to the related picture page. The displayCodeFile function displays a header and a block for a file with a link to the related code viewer page. The displayDownload function displays the download image as well as a link to the file and the file size. All of these functions are called by page scripts when they encounter a line formatted as “[<type>:attribute=’’list=’’...]”. The <type> determines which function to call and the attribute list contains information that the functions use to determine what to display. The attribute list is broken up by the getAttribute function which takes the name of an attribute and returns the value of that attribute. All of the functions construct a string which is returned to the calling page script to be printed.